<template>
  <ul class="externalLinks e4" v-if="itemId==='cms_safe_cert'">

    <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="y">
      <a href="https://jsy.xjjs.gov.cn/public/matter/safetyNotice" target="_blank">
        <span>安许证公示</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="g">
      <a href="https://jsy.xjjs.gov.cn/public/matter/safetyPublish" target="_blank">
        <span>安许证公告</span> <RightCircleOutlined />
      </a>
    </li>

  </ul>
  <ul class="externalLinks e4" v-if="itemId==='cms_reg_cert'">   <!-- 执业资格 -->
    <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="g">
      <a href="javascript:" @click="open">
        <i>个</i> <span>个人微信小程序</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="y">
      <a href="https://jsy.xjjs.gov.cn/public/matter/aptNoticeNotice" target="_blank">
        <span>公示公告</span> <RightCircleOutlined />
      </a>
    </li>

  </ul>

  <ul class="externalLinks " v-if="itemId==='cms_ry_cert'">   <!-- 安全三类、特种作业人员业务 -->
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="g">
      <a href="javascript:" @click="open">
        <i>个</i> <span>个人微信小程序</span> <RightCircleOutlined />
      </a>
    </li>
  </ul>

  <ul class="externalLinks " v-if="itemId==='cms_apt_cert'">   <!-- 企业资质申报业务 -->
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="g">
      <a href="javascript:" @click="open">
        <i>个</i> <span>个人微信小程序</span> <RightCircleOutlined />
      </a>
    </li>
  </ul>

  <ul class="externalLinks h7" v-if="itemId==='cms_proj_mgr'">   <!-- 工程项目监管业务 -->
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
        <p>(勘察、设计、施工、监理）</p>
      </a>
    </li>
     <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="v">
      <a href="http://jsy.xjjs.gov.cn:9009/c/login" target="_blank">
        <i>建</i> <span>建设单位服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="c">
      <a href="http://jsy.xjjs.gov.cn:9011/r/login" target="_blank">
        <i>项</i> <span>项目管理平台</span> <RightCircleOutlined />
        <p>(设计项目负责人登陆）</p>
      </a>
    </li>
  </ul>


  <ul class="externalLinks e4" v-if="itemId==='cms_credit'">   <!-- 信用评价 -->
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>申请入口(CA锁登陆)</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:18060/c/uc/login" target="_blank">
        <i>企</i> <span>申请入口(帐号密码登陆)</span> <RightCircleOutlined />
      </a>
    </li>

     <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="y">
      <a href="http://jsy.xjjs.gov.cn:8030/" target="_blank">
        <span>信用结果公示</span> <RightCircleOutlined />
      </a>
    </li>
  </ul>


  <ul class="externalLinks" v-if="itemId==='cms_jinjiang'">   <!-- 区外进疆企业信息报送业务 -->
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>


     <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="y">
      <a href="https://jsy.xjjs.gov.cn/public/matter/aptNoticeNotice" target="_blank">
        <span>进疆报送企业信息公示</span> <RightCircleOutlined />
      </a>
    </li>
  </ul>

  <template v-if="itemId==='cms_exam'"> <!-- 建设行业教育培训考试业务 -->
    <ul class="externalLinks half e2" >
      <li class="c">
        <a href="http://jsy.xjjs.gov.cn:5002/pxjgLogin" target="_blank">
          <i>申</i> <span>培训机构申报入口</span> <RightCircleOutlined />
        </a>
      </li>

      <li class="y">
        <a href="http://jsy.xjjs.gov.cn:5002/govPxjgLogin" target="_blank">
          <i>审</i> <span>培训机构申报审核入口</span> <RightCircleOutlined />
        </a>
      </li>

    </ul>
    <ul class="externalLinks" >
      <li class="g">
        <a href="http://xzql.xjjs.gov.cn:5009/p/login" target="_blank">
          <i>个</i> <span>个人报名登录入口</span> <RightCircleOutlined />
        </a>
      </li>

      <li class="b">
        <a href="http://xzql.xjjs.gov.cn:5006/g/login" target="_blank">
          <i>企</i> <span>培训机构登录入口</span> <RightCircleOutlined />
        </a>
      </li>

      <li class="r">
        <a href="http://xzql.xjjs.gov.cn:5006/g/login" target="_blank">
          <i>政</i> <span>主管部门登录入口</span> <RightCircleOutlined />
        </a>
      </li>

    </ul>
  </template>


  <ul class="externalLinks e2" v-if="itemId==='cms_performance'">   <!-- 历史业绩补录业务 -->
     <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>
     <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
  </ul>

  <ul class="externalLinks e2" v-if="itemId==='cms_statistical'">   <!-- 进疆施工企业数据上报业务 -->
    <li class="b">
      <a href="http://jsy.xjjs.gov.cn:8040/c/uc/login" target="_blank">
        <i>企</i> <span>企业服务平台</span> <RightCircleOutlined />
      </a>
    </li>
    <li class="r">
      <a href="http://jsy.xjjs.gov.cn:8050/g/login" target="_blank">
        <i>政</i> <span>政务服务平台</span> <RightCircleOutlined />
      </a>
    </li>
  </ul>

  <ModalPerson v-model:visible="personVisible"/>
</template>

<script lang="ts" >
import {defineComponent, inject, ref} from "vue";
import { Row, Col } from "ant-design-vue";
import { RightCircleOutlined } from '@ant-design/icons-vue';
import { ModalPerson } from '/@/views/home/components';
export default defineComponent({
  name: "externalLinks",
  components: { Row, Col , RightCircleOutlined , ModalPerson},
  setup() {
    const itemId = inject('itemId') as string;
    const personVisible = ref<boolean>(false);
    const open = function (){
      personVisible.value = true;
    }
    return {
      itemId , personVisible , open
    };
  }
});
</script>

<style lang="less" scoped>


.externalLinks{
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
  flex-wrap: wrap;

  >li{
    width: 390px;
    height: 50px;
    margin-bottom: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);

    a{
      display: block;
      height: 100%;
      padding: 10px 20px;
      font-size: 18px;
      color: white;

      i{
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-right: 10px;
        font-size: 14px;
        line-height: 22px;
        color: #3DABFE;
        text-align: center;
        background: #FFF;
        border-radius: 4px;
      }

      .anticon{
        float: right;
        font-size: 17px;
        transform: translateY(7px);
      }
    }

    &.b{
      background: linear-gradient(92deg, #4292FF 0%, #4275FF 100%);

      a i { color: #4292FF; }
    }

    &.r{
      background: linear-gradient(271deg, #E0414A 0%, #FF3E3E 100%);

      a i { color: #E0414A; }
    }

    &.g{
      background: linear-gradient(90deg, #69D475 0%, #48CA56 100%);

      a i { color: #69D475; }
    }

    &.y{
      background: linear-gradient(90deg, #F6A043 0%, #F6A043 100%);

      a i { color: #F6A043; }
    }

    &.v{
      background: linear-gradient(90deg, #F6A043 0%, #F6A043 100%);

      a i { color: #F6A043; }
    }

    &.c{
      background: linear-gradient(90deg, #2D9CFD 0%, #0894FF 100%);

      a i { color: #2D9CFD; }
    }
  }

  &.e2{
    justify-content: flex-start;

    >li{
      margin-right: 15px;
    }
  }


  &.half{
    padding-bottom: 0;
    margin-bottom: 0;
  }

  &.e4{
    >li{
      width: 290px;
    }
  }

  &.h7{
    >li{
      height: 70px;

      p{
        padding-left: 40px;
        color: rgba(255,255,255,.7);
      }
    }
  }
}

</style>
